<template>
	<view class="container">
		<view class="content">
			<view class="shopInfo">
				<view class="shopDetail">
					<view class="shopAvatar">
						<image :src="shopInfo.headPortrait" mode=""></image>
					</view>
					<view class="shopDetailInfo">
						<view class="shopName">{{shopInfo.name}}</view>
						<view class="shopfans">
							<view class="shopfansItem firstView">粉丝 {{shopInfo.realFans}}</view>
							<view class="shopfansItem">已成团 {{shopInfo.realCollage}}</view>
						</view>
					</view>
				</view>
				<view class="shopMask">
					店铺简介：{{shopInfo.intro}}
				</view>
			</view>
			<view class="shopCollage">
				<view class="selectBar">
					<view class="selectBarItem activeItem">正在拼团</view>
					<view class="selectBarItem">已完成</view>
				</view>
				<view class="collageList" v-if="collageList.length>0">
					<view class="listItem" v-for="item in collageList">
						<view class="collageImg">
							<image :src="item.imagePath" mode=""></image>
						</view>
						<view class="collageInfo">
							<view class="collageName">{{item.collageName}}</view>
							<!-- <view class="tips">1盒 | 选组随机（卡种区分编号）</view> -->
							<view class="progressText">
								<view class="price"><text style="font-size: 20rpx;">￥</text>{{item.unitPrice}}</view>
								<view>余{{item.surplusLot}}/{{item.lotCount}}</view>
							</view>
							<view class="progreessBar">
								<u-line-progress :percentage="(1-item.surplusLot/item.lotCount)*100" :showText="false"
									inactiveColor="rgb(221,221,221)"
									activeColor="linear-gradient(270deg, #6FFF8E 0%, #BEFD00 100%)"></u-line-progress>
							</view>

						</view>
					</view>
				</view>
				<view class="noList" v-else>
					<!-- <sys-noList2></sys-noList2> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShopInfoById,
		getShopcollageList
	} from '@/api/public.js'
	// import {
	// 	getCommonCardCollageInfo,
	// 	getShopInfoById
	// } from '@/api/shopIndex.js'
	export default {
		data() {
			return {
				shopInfo: {},
				collageList: [],
				dictMaps: {},
			};
		},
		onLoad(opt) {
			if (opt && opt.shopId) {
				this.getShopInfoById(opt.shopId)
				this.getCommonCardCollageInfo(opt.shopId)
			} else {
				uni.$u.toast('参数错误请重试')
			}
			this.dicts.forEach(async (item) => {
				this.dictMaps[item] = await this.getDicts(item)
			})
			console.log(this.dictMaps)
		},
		methods: {
			async getShopInfoById(shopId) {
				let res = await getShopInfoById(shopId)
				if (res.code == 200) {
					this.shopInfo = res.data
				} else {
					uni.$u.toast(res.msg)
				}
			},
			async getCommonCardCollageInfo(shopId) {
				let res = await getShopcollageList(shopId)
				if (res.code == 200) {
					this.collageList = res.data.dataInfo
				} else {
					uni.$u.toast(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;

		view {
			box-sizing: border-box;
		}

		image {
			vertical-align: bottom;
		}

		.content {
			height: 100vh;

			.shopInfo {
				width: 750rpx;
				height: 766rpx;
				padding: 100rpx 30rpx;
				background: url('../../static/image/shopIndexTopBg.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: fixed;
				top: 0;
				left: 0;

				.shopDetail {
					display: flex;
					align-items: center;

					.shopAvatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						overflow: hidden;
						border: 4rpx solid #fff;
						margin-right: 14rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.shopDetailInfo {
						color: #fff;

						.shopName {
							font-size: 32rpx;
							line-height: 32rpx;
							margin-bottom: 16rpx;
						}

						.shopfans {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							line-height: 24rpx;

							.firstView {
								padding-right: 16rpx;
								border-right: 3rpx solid #fff;
								margin-right: 16rpx;
							}
						}
					}
				}

				.shopMask {
					margin-top: 40rpx;
					line-height: 36rpx;
					font-size: 22rpx;
					color: #D9D9D9;
				}
			}

			.shopCollage {
				padding: 32rpx;
				border-radius: 24rpx 24rpx 0px 0px;
				overflow: hidden;
				position: relative;
				margin-top: 380rpx;
				background-image: url('/static/image/shopIndexCenterBg.png');
				background-repeat: no-repeat;
				background-size: 100% auto;
				background-color: #0A0C2F;
				min-height: calc(100vh - 400rpx);

				.selectBar {
					display: flex;
					align-items: center;

					.selectBarItem {
						// width: 140rpx;
						margin: 0 48rpx 8rpx 8rpx;
						padding-bottom: 4rpx;
						text-align: center;
						font-size: 28rpx;
						color: #fff;
					}

					.activeItem {
						font-size: 32rpx;
						font-weight: bold;
						border-bottom: 4rpx solid #1F1F1F;
					}
				}

				.collageList {
					margin-top: 16rpx;

					.listItem {
						// background: #FFF;
						background: linear-gradient(179.2deg, #1C1C3D 0.69%, rgba(28, 28, 61, 0.8) 99.32%);
						box-shadow: 0px 0px 4px 0px rgba(200, 211, 255, 0.6) inset;
						// backdrop-filter: blur(10px) ;
						padding: 20rpx;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						margin-bottom: 16rpx;

						.collageImg {
							width: 260rpx;
							height: 196rpx;
							border-radius: 8rpx;
							overflow: hidden;
							margin-right: 16rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.collageInfo {
							width: 390rpx;
							color: rgba(255, 255, 255, 1);

							.collageName {
								font-size: 24rpx;
								line-height: 32rpx;
								width: 100%;
								height: 68rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2; //表明是2行文本显示省略号，换成3则表明是3行文本显示省略号
								-webkit-box-orient: vertical;
							}

							.tips {
								font-size: 20rpx;
								line-height: 20rpx;
								color: #B1B1B1;

							}

							.price {
								margin: 32rpx 0 0;
								font-size: 28rpx;
								line-height: 28rpx;
								font-family: Roboto;
								color: rgba(255, 187, 0, 1);
							}

							.progreessBar {
								margin: 10rpx 0 10rpx;
							}

							.progressText {
								// line-height: 20rpx;
								font-size: 20rpx;
								display: flex;
								align-items: flex-end;
								justify-content: space-between;
							}
						}
					}
				}
			}
		}
	}
</style>